<template>
    <div class="main_left_sort">
        <div v-for="(item,index) in oneSortList" :key="item.id">
            <div @click="labelSearch(item.tagName,index)"
                 :class="{'isActive':isActive===index}"
                 class="main_left_sort_item">
                {{ item.tagName }}
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import {ref} from "vue";
import {getOneSortList, searchArticle} from "@/api/home/article";
// @ts-ignore
import Publish from 'pubsub-js'
import {useStore} from "@/store";
import router from "@/router";
import {RequestParams} from "@/model/home/answer";
// @ts-ignore
import cookie from 'js-cookie'

//是否激活
const isActive = ref(-1)

//一级标签列表
const oneSortList = ref()

//获取一级标签列表
const handleOneSortList = () => {
    getOneSortList().then((res) => {
        oneSortList.value = res.data.data.list
    })
}

//全文检索所需的参数
const requestParams = ref<RequestParams>({
    key: '',
    page: 1,
    size: 10,
    sortBy: ''
})

//标签搜索
const labelSearch = (tagName: string, index: number) => {
    requestParams.value.key = tagName
    searchArticle(requestParams.value).then((res) => {
        res.data.data.pageResult.articles.map((item: any) => {
            item.title = item.title.replaceAll("<em>", "<nobr style='color: red;white-space: nowrap;'>")
            item.title = item.title.replaceAll("</em>", "</nobr>")
            item.labelTranslation = item.labelTranslation.replaceAll("<em>", "<nobr style='color: red;white-space: nowrap;'>")
            item.labelTranslation = item.labelTranslation.replaceAll("</em>", "</nobr>")
        })
        const store = useStore()
        store.setKey(requestParams.value.key)
        const msg = []
        msg.push(res.data.data.pageResult.articles)
        msg.push(requestParams.value.key)
        msg.push(res.data.data.pageResult.total)
        //导航条动态样式
        cookie.set('isActive', index)
        isActive.value = Number(cookie.get('isActive'))
        Publish.publish('searchArticleList', msg)
        router.push('/')
    })
}

handleOneSortList()
</script>

<style lang="less" scoped>
.main_left_sort {
  justify-content: center;
  align-items: center;
  margin-top: 5px;
  display: flex;
  flex-flow: wrap;
  box-shadow: rgba(255, 105, 180, 0.3) 0 0 0 3px;
  background-color: #ffffff;

  .main_left_sort_item {
    margin: 5px 15px;
    cursor: pointer;
    font-size: 15px;
  }

  .isActive {
    color: red;
  }
}
</style>